<template>
  <div>
    <el-row :gutter="20">
      <!-- 个人信息模块+品牌表格统计 -->
      <el-col :span="8" style="margin-top: 20px">
        <el-card shadow="hover">
          <div class="user">
            <img :src="useImg" alt="" />
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
          </div>
          <hr />
          <div class="login-info">
            <p>登录的时间：<span>2024-10-1</span></p>
            <p>登录的地点：<span>科研尔-阳城</span></p>
          </div>
        </el-card>
        <!-- 品牌表格统计 -->
        <el-card shadow="hover" style="margin-top: 20px">
          <el-table :data="tableData" height="400" stripe>
            <el-table-column
              fixed
              v-for="(val, key) in tableLabel"
              :key="key"
              :label="val"
              :prop="key"
            >
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <!-- 数据统计模块 -->
      <el-col :span="16" style="margin-top: 20px">
        <!-- 账单卡片 -->
        <div class="num">
          <el-card
            shadow="hover"
            v-for="item in countData"
            :key="item.name"
            :body-style="{ display: 'flex', padding: 0 }"
          >
            <div class="pic">
              <i
                class="icon"
                :class="`el-icon-${item.icon}`"
                :style="{ backgroundColor: item.color }"
              ></i>
            </div>
            <div class="detail">
              <p class="price">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
          </el-card>
        </div>
        <!-- 图标展示+信息模块 -->
        <div class="charts">
          <el-card shadow="hover" style="height: 230px"> 1</el-card>
          <div class="info">
            <el-card shadow="hover" style="height: 150px"> </el-card>
            <el-card shadow="hover" style="height: 150px"> </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getData } from '../../api/data.js'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'User',
  data () {
    return {
      useImg: require('../assets/images/user.png'),
      tableData: [],
      tableLabel: {
        name: '品牌',
        todayBuy: '今日购买',
        monthBuy: '本月销量',
        totalBuy: '总销量'
      },
      countData: [
        {
          name: '本月支付订单',
          value: 50,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '今日支付订单',
          value: 1160,
          icon: 'success',
          color: '#2ec7c9'
        },
        {
          name: '今日未支付订单',
          value: 200,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '今日收藏订单',
          value: 200,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '本月收藏订单',
          value: 19.9,
          icon: 'star-on',
          color: '#ffb980'
        },
        {
          name: '今日未支付订单',
          value: 100,
          icon: 's-goods',
          color: '#5ab1ef'
        },
        {
          name: '本月未支付订单',
          value: 1999,
          icon: 's-goods',
          color: '#5ab1ef'
        }
      ]
    }
  },
  methods: {},
  mounted () {
    // // 测试http引入
    // this.$http
    //   .get('/user?ID=1234')
    //   .then(function (response) {
    //     console.log(response)
    //   })
    //   .catch(function (error) {
    //     console.log(error)
    //   })
    // // 测试axios二次封装
    // getMenu().then(res => {
    //   console.log(res)
    // })
    // // 测试axios二次封装
    // getMenu().then(res => {
    //   console.log(res)
    // })
    getData().then(res => {
      const { code, data } = res.data
      if (code === 20000) {
        //如果状态码正确，就直接覆盖tableData数据
        this.tableData = data.tableData
      }
      console.log(res)
    })
  }
}
</script>

<style lang="less" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
  //个人信息模块+品牌表格统计
  .el-col {
    border-radius: 4px;
    .el-card {
      .user {
        display: flex;
        align-items: center;
        img {
          height: 150px;
          width: 150px;
          border-radius: 50%;
        }
        .userinfo {
          margin-left: 20px;
          .name {
            font-size: 30px;
            font-weight: 800;
            margin-bottom: 0px;
          }
          .access {
            margin-top: 0px;
          }
        }
      }
      .login-info {
        font-size: 14px;
        display: flex; /* 启用Flex布局 */
        flex-direction: row; /* 设置为横向布局 */
        justify-content: space-between;
        p {
          color: #9a9a9a;
          margin: 0;
        }
      }
    }
  }
  //数据统计模块
  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    // 账单卡片
    .el-card:last-child {
      // 使用伪类，让最后一个模块没有下边距
      margin-bottom: 0;
    }
    .el-card {
      width: 32%;
      height: 80px;
      // margin-right: 20px;
      margin-bottom: 10px;

      .icon {
        width: 80px;
        height: 80px;
        font-size: 30px;
        text-align: center;
        line-height: 80px;
        color: #fff;
      }
      .detail {
        margin-left: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .price {
          font-size: 30px;
          // margin-bottom: 10px;
          // line-height: 30px;
          // height: 30px;
          margin-top: 10px;
          margin-bottom: 0px;
        }
        .txt {
          font-size: 14px;
          color: #999;
          text-align: center;
          margin-top: 0;
        }
      }
    }
  }
  // 图表展示+信息模块
  // 图表展示
  .charts {
    margin-top: 20px;
    // 信息模块
    .info {
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .el-card {
        width: 49%;
      }
    }
  }
}
</style>
